<template>
    <div class="item-statistics">

        <div class="title">
            <slot name="title"></slot>
        </div>
        <div class="amount">
            <slot name="amount"></slot>
        </div>
        <span class="link">
            <slot name="link"></slot>
        </span>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.item-statistics {
    position: relative;
    width: 30%;
    box-shadow: 10px 10px 5px rgb(189, 189, 189);
    border: 2px solid bisque;
    border-radius: 10px;

    .title {
        width: 150px;
        height: 60px;
        line-height: 60px;
        margin: 40px auto;
        font-size: 26px;
        text-align: center
    }

    .amount {
        display: flex;
        align-items: center;
        width: 80%;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border: 5px solid rgb(221, 221, 221);
        border-radius: 50%;

        :deep(.inside-box-amount) {
            display: flex;
            align-items: center;
            width: 90%;
            margin: auto;
            aspect-ratio: 1 / 1;
            border-radius: 50%;

            span {
                margin: 0 auto;
                font-size: 40px;
            }
        }

        .number {
            width: 100%;
            text-align: center;
            font-size: 60px;
        }
    }

    .link {
        position: absolute;
        bottom: 20px;
        right: 30px;
        cursor: pointer;


        :deep(span) {
            color: rgb(101, 101, 101);
        }

        :deep(span):hover {
            color: black;
        }
    }


}
</style>